<template>
  <div class="map">
    <div id="mapWrapper"></div>
  </div>
</template>

<script>
export default {
  props: ["cityId"],
  data() {
    return {
      userLocation: "",
      pois: [],
      // 地图的key
      key: "7a9b0ae0c16789aebb15432209004520",
      map: {},
      markers: []
    };
  },
  watch: {
    async cityId() {
      await this.loadPoiList();
      this.setMarkers();
    }
  },
  async mounted() {
    //   获取位置
    this.loadUserLocation();
    await this.loadPoiList();
    window.onLoad = () => {
      // 创建地图
      this.createMap();
    };

    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=092093e43b365cbafa5c434371ff9724&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },
  methods: {
    // 创建地图
    createMap() {
      this.map = new AMap.Map("mapWrapper", {
        zoom: 15,
        viewMode: "3D"
      });
      console.log(this.pois);

      // 创建完地图 每个地点都创建一个 marker 放到地图上
      this.setMarkers();
    },
    // 获取用户定位
    loadUserLocation() {
      this.$axios({
        url: "https://restapi.amap.com/v3/ip",
        params: {
          key: this.key
        }
      }).then(res => {
        // console.log(res.data.city);
        this.userLocation = res.data.city;
        if (!this.$route.query.city) {
          this.$confirm(`定位当前城市: ${res.data.city}`, "提示", {
            confirmButtonText: "确定",
            showCancelButton: false,
            type: "success"
          });
          this.$router.push({
            path: "/hotel?city=" + this.userLocation
          });
        }
      });
    },
    // 获取当前城市酒店位置
    loadPoiList() {
      return this.$axios({
        url: "/hotels",
        params: {
          city: this.cityId || 197
        }
      }).then(res => {
        // console.log(res.data);
        this.pois = res.data.data;
        console.log(this.pois);
      });
    },
    // 设置点标记
    setMarkers() {
      this.markers = this.pois.map(poi => {
        let position = [];
        for (let key in poi.location) {
          position.unshift(poi.location[key]);
        }

        var marker = new AMap.Marker({
          title: poi.name,
          position,
          extData: poi.id
        });
        marker.on("mouseover", () => {
          return this.showPoi(poi.id);
        });
        return marker;
      });
      this.map.clearMap();
      this.map.add(this.markers);
      this.map.setFitView();
    },
    showPoi(poiId) {
      this.markers.forEach(marker => {
        if (marker.getExtData() == poiId) {
          marker.setTop(true);
          const infoWindow = new AMap.InfoWindow({
            content: `<span style="font-size: 12px;color: #333">${marker.getTitle()}</span>`,
            offset: new AMap.Pixel(0, -32)
          });
          infoWindow.open(this.map, marker.getPosition());
          this.map.setCenter(marker.getPosition());
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.map {
  display: flex;
  #mapWrapper {
    width: 650px;
    height: 354px;
  }
}
</style>